<template>
    <div style="width: 100%;height: 100%;">
        <!-- 表格：设置row-key，绑定分页数据 -->
        <el-table
                ref="multipleTable"
                :data="tableData"
                border
                row-key="id"
                @selection-change="handleSelectionChange"
                @select="markUserAction"
                @select-all="markUserAction"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                layout="prev, pager, next"
        ></el-pagination>
        <!-- 展示所有选中的数据 -->
        <div style="margin-top: 20px;">
            <p>跨页选中的ID：{{ selectedRows }}</p>
            <el-button @click="clearAllSelection">清空所有选中</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [], // 当前页数据
                currentPage: 1, // 当前页码
                pageSize: 2, // 每页条数
                total: 5, // 总条数
                selectedRows: [], // 存储完整的选中行数据
                isUserAction: false,  // 标记是否是用户主动点击复选框
            }
        },
        mounted() {
            // 初始化加载第一页数据
            this.loadTableData()
        },
        methods: {
            // 加载表格数据（模拟分页请求）
            loadTableData() {
                // 模拟后端分页数据（实际项目中替换为接口请求）
                const mockData = [
                    {id: 1, name: '张三', address: '北京'},
                    {id: 2, name: '李四', address: '上海'},
                    {id: 3, name: '王五', address: '广州'},
                    {id: 4, name: '赵六', address: '深圳'},
                    {id: 5, name: '钱七', address: '杭州'}
                ];
                // 截取当前页数据
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                this.tableData = mockData.slice(start, end);
                // 数据加载完成后，重新设置当前页的选中状态
                this.$nextTick(() => {
                    this.setPageSelection();
                });
            },
            // 页码切换时重新加载数据
            handleCurrentChange(page) {
                this.currentPage = page;
                this.loadTableData()
            },
            // 标记用户主动操作
            markUserAction() {
                this.isUserAction = true;
                console.log("markUserAction")
            },
            // 监听选中状态变化，更新selectedIds
            handleSelectionChange(selection) {
                // 只有用户主动操作时，才更新选中ID
                if (!this.isUserAction) {
                    return;
                }
                // 1. 先获取当前页所有行的id
                const currentPageIds = this.tableData.map(row => row.id);
                // 2. 移除当前页在selectedIds中的旧数据（避免重复）
                this.selectedRows = this.selectedRows.filter(row => !currentPageIds.includes(row.id));
                // 3. 添加当前页新选中的id
                this.selectedRows.push(...selection);
                // 4. 重置标记（避免影响下次判断）
                this.isUserAction = false;
            },

            // 数据加载后，设置当前页的选中状态
            setPageSelection() {
                this.$nextTick(() => {
                    // 关键：先清空当前页的所有选中状态，避免旧状态干扰
                    this.$refs.multipleTable.clearSelection();
                    // 再重新设置选中
                    this.tableData.forEach(row => {
                        // 判断当前行的id是否在selectedRows中（通过id匹配，忽略对象引用差异）
                        const isSelected = this.selectedRows.some(selectedRow => selectedRow.id === row.id);
                        if (isSelected) {
                            this.$refs.multipleTable.toggleRowSelection(row, true);
                            console.log("选中id:" + row.id);
                        }
                    });
                });
            },
            // 清空所有选中状态
            clearAllSelection() {
                this.selectedRows = [];
                this.$refs.multipleTable.clearSelection()
            }
        }
    }
</script>